<template>
  <div class="q-mx-md">

      <div class="size-14 text-grey-8 q-mb-md">提示：鼠标滚轮缩放图片，鼠标拖动改变图片位置</div>
      <div class="row">
        <a-loading :visible="true" v-if="loading" style="left: -20%"></a-loading>
        <template v-else>
          <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12">
            <vueCropper
              style="min-height: 40vh"
              autoCrop
              fixed
              fixedBox
              :autoCropWidth="size"
              :autoCropHeight="size"
              ref="cropper"
              @realTime="onRealTime"
              :img="image"
            ></vueCropper>
            <div class="q-my-md q-mb-md row justify-between">
              <div class="col-6 q-pr-sm">
                <q-btn class="q-mr-sm full-width" color="primary" outline label="选择图片" @click="clickInput"/>
                <input v-if="input" class="hidden" id="img-file" type="file" accept="image/png, image/jpeg" @change="setImage"/>
              </div>
              <div class="col-6 q-pl-sm">
                <q-btn :disabled="!image" class="q-mr-sm full-width" color="primary" outline label="上传头像" @click="uploadImage"/>
              </div>
            </div></div>
        </template>
        <div v-if="$q.screen.gt.md && !loading">
            <div v-if="previews" class="q-mx-md" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
              <div :style="previews.div">
                <img :src="image" :style="previews.img">
              </div>
            </div>
            <div v-if="previews"
                 class="q-mx-md"
                 style="transform: scale(0.48, 0.48);border-radius: 50%"
                 :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
              <div :style="previews.div">
                <img :src="image" :style="previews.img">
              </div>
            </div>
            <div v-if="previews"
                 class="q-mx-md"
                 style="transform: scale(0.32, 0.32) translateY(-100px);border-radius: 50%"
                 :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
              <div :style="previews.div">
                <img :src="image" :style="previews.img">
              </div>
            </div>
            <div v-if="previews"
                 class="q-mx-md"
                 style="transform: scale(0.24, 0.24) translateY(-320px);border-radius: 50%"
                 :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
              <div :style="previews.div">
                <img :src="image" :style="previews.img">
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
  import VueCropper from 'vue-cropper'
  import { authMixin, uploadOssMixin } from '../../../mixins'

  export default {
    name: 'pageSettingsHead',
    components: { VueCropper },
    mixins: [uploadOssMixin, authMixin],
    data: function () {
      return {
        loading: false,
        previews: null,
        image: null,
        input: true,
        size: 100
      }
    },
    methods: {
      onRealTime (data) {
        this.previews = data
      },
      setImage () {
        this.input = false
        const file = event.target.files[0]
        const reader = new FileReader()
        this.loading = true
        reader.onload = (event) => {
          const blob = new Blob([event.target.result])
          const data = window.URL.createObjectURL(blob)

          this.image = data
        }
        reader.readAsArrayBuffer(file)

        setTimeout(() => {
          this.input = true
          this.loading = false
        }, 500)
      },
      clickInput () {
        document.getElementById('img-file').click()
      },
      getImageBlob () {
        return new Promise((resolve, reject) => {
          this.$refs.cropper.getCropBlob((data) => {
            resolve(data)
          })
        })
      },
      async uploadImage () {
        this.loading = true
        const image = await this.getImageBlob()
        const { status, data } = await this.uploadOssFile(image, 'head', { height: 100, width: 100 })

        if (status !== 200) {
          this.notify('error', '上传图片失败，请稍后重试！')
          return
        }

        const { url } = data

        const result = await this.postRequest({
          api: '/api/user/head/',
          data: {
            head: url
          }
        })
        this.loading = false

        if (result.status === 200) {
          this.notify('success', '设置头像成功！')
          this.$store.commit('setAuth', { head: url })
          this.image = null
          this.updateCookieUser()
        } else {
          this.notify('error', '上传图片失败，请稍后重试！')
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
